<script setup>
import { defineProps, defineEmits, reactive } from 'vue'

const props = defineProps({
  ignore: {
    type: Array,
    default: () => {
      return []
    },
  },
  selectValue: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['change'])

const list = reactive([
  {
    name: '今日',
    value: 'day',
  },
  {
    name: '周',
    value: 'week',
  },
  {
    name: '月',
    value: 'month',
  },
])

// 点击改变
function change(item = {}) {
  if (props?.selectValue === item?.value) {
    return
  }

  emit('change', item)
}
</script>

<template>
  <div class="filter-bar-box">
    <template v-for="(item, index) in list" :key="index">
      <div
        v-if="!props.ignore.includes(item.name)"
        :class="['filter-bar', selectValue === item.value && 'filter-bar-active']"
        @click="change(item)"
      >
        {{ item.name }}
      </div>
    </template>
  </div>
</template>

<style lang="less" scoped>
.filter-bar-box {
  display: flex;
  justify-content: flex-end;

  .filter-bar {
    width: 38px;
    height: 16px;
    background: rgba(0, 152, 221, 0.3);
    border-radius: 4px;
    font-size: 12px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:not(:first-child) {
      margin-left: 4px;
    }

    &.filter-bar-active {
      background: rgba(0, 152, 221, 1);
    }
  }
}
</style>
